<template>
	<div id = 'article'>
		<h3 style="padding:0 0 15px 15px">{{ isEdit ? "编辑文章模板" : "添加文章模板"}}</h3>
		<el-form label-width="100px" ref="form" :model="form">
			<el-form-item
						v-for="(field, index) in fields"
						v-if="!field.noSave &&!field.noFormDisplay"
						:label="field.label"
						:prop="field.tableName"
						:key="index"
						:rules="field.rules"
						>
					<wt-model-field-input
							:ref="field.tableName"
							:field="field"
							:form="form"
							:params-data="params_data"
							v-model="currentValue"
							:class="{'wt-model-inline-field' : field.conditions}"
							></wt-model-field-input>
					<span class="wt-extra" v-if="field.extra">{{field.extra}}</span>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSave" :loading="saving" icon="check">保存</el-button>
					<el-button v-if="form.template" @click="preview" icon="document">预览</el-button>
					<el-button @click="onCancel" icon="close">取消</el-button>
				</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import Vue from 'vue'	
	import request from 'winged/utils/axios'
	import Fields from 'winged/utils/wt-model-field'
	import Permissions from 'winged/utils/wt-permission'
	import FieldInput from 'winged/components/wt-model-field-input'
	import ModelUtils from 'winged/utils/wt-model-utils'
	import ModelService from 'winged/utils/wt-model-service'
	import WtDepartmentSelect from 'winged/components/wt-department-select'
	import FieldSelect from 'winged/components/wt-model-field-select'

	export default {
		name : "wt-new-article",
		components:{
			[[FieldInput.name]]:FieldInput,
			[[WtDepartmentSelect.name]]:WtDepartmentSelect,
			[[FieldSelect.name]]:FieldSelect,
		},
		props : {			
			model: {
				type: Object,
				required: true,
			},
			value: {
				type: Object,
				default: {}
			},
			paramsData: {
				type: Object,
				default: {}
			},			
			id: {
				type: [Object, String, Number],
				default: null
			},
			type: {
				type: [String,Number],
				default: ''
			}
		},
		data(){
			return{
				isEdit : false,
				form: this.value != null ? ModelUtils.cloneObject(this.value) : ModelUtils.createDefaultObject(this.model),
				fields:this.model.fields,
				params_data:this.paramsData,
				currentValue:this.value,
				saving:false,
				rules:{
				},
			}
		},
		methods:{
			onSave(){
				this.dosave()
			},
			onCancel(){
				this.$emit('cancel');
			},
			content(){
				let cont = true;
				if(typeof(this.form.content)=="string"){
					this.form.content = JSON.parse(this.form.content)
				}
				if(this.form.template==1){
						for(let i = 0; i<this.form.content.body.length;i++){
							if(!this.form.content.body[i].title||!this.form.content.body[i].desc||!this.form.content.body[i].url){
								cont = false;
								break;
							}
						}
				}else if(this.form.template==2){
					for(let i = 0; i<this.form.content.body.length;i++){
						if(!this.form.content.body[i].title||!this.form.content.body[i].url){
							cont = false;
							break;
						}
					}
				}
				return cont;
			},
			preview(){
				this.form.content = this.currentValue.content;
				 var form = $("<form method='post' target='_blank' action = '/admin/common/preview'></form>");
				//target:是否跳转到新页面参数
				for (var arg in this.form){
					var input = $("<input type='hidden'>");
					input.attr({"name":arg});
					if(arg == "content"){
					this.form[arg] = JSON.stringify(this.form[arg])
					}
					input.val(this.form[arg]);
					form.append(input);
				}
				$(document.body).append(form);
				form.submit();
			},
			dosave(){
				this.$refs.form.validate((valid) => {
					if (valid&&this.content()) {
						this.saving = true;
						let config;
						if (this.isEdit) {
							config = this.model.update;
						} else {
							config = this.model.new;
						}
						if(typeof(this.form.content)=="string"){
							this.form.content = JSON.parse(this.form.content)
						}		
					ModelUtils.buildQueryExtraParams(config, this.paramsData, this.form);
					ModelService.save(this.model, this.id, this.form, (data) => {
							this.$emit('saved', data);
							this.saving = false;
							this.$message.success('保存成功');
						}, (error) => {
							this.$message.error('保存失败');
							this.saving = false;
						})
					}
				})
			},
		},
		created(){		
			this.form.type = this.type
			if(!this.form.content){
				this.form.content = {
					head:{},
					body:[]
				}
			}
			if(this.id){
				this.isEdit = true;
			}else{
				this.isEdit = false
			}
		}
	}
</script>